<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix" >
    <el-button type="primary">新增按钮</el-button>
  </div>
  <!-- 表单 -->
      <el-form :inline="true" :model="formData" ref="form"  class="demo-form-inline" label-width="100px">
         <el-form-item label="学科" >
            <el-select placeholder="请选择" v-model="formData.subjectID"  style="width:300px" @change="change">
            <el-option  v-for="item in subjectList" :key="item.value" :value="item.value"  :label="item.label" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" >
          <el-select placeholder="请选择" v-model="formData.catalogID" style="width:300px" >
            <el-option v-for="item in directorysList" :key="item.value" :value="item.value" :label="item.label"></el-option>
           
          </el-select>
        </el-form-item>
        <el-form-item label="标签" >
          <el-select placeholder="请选择" v-model="formData.tags" style="width:300px" >
             <el-option v-for="item in tagsList" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="关键字" >
           <el-input style="width:300px" v-model="formData.Keys"></el-input>
         </el-form-item>
           <el-form-item label="试题类型" >
          <el-select placeholder="请选择" v-model="formData.questionType"  style="width:300px">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" >
          <el-select placeholder="请选择" v-model="formData.difficulty" style="width:300px">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="方向"  >
           <el-input style="width:300px" v-model="formData.direction"></el-input>
         </el-form-item>
         <el-form-item label="录入人" >
           <el-input style="width:300px" v-model="formData.creatorID"></el-input>
         </el-form-item>
          <el-form-item label="题目备注" >
           <el-input style="width:300px" v-model="formData.remarks"></el-input>
         </el-form-item>
        <el-form-item label="企业简称" >
           <el-input style="width:300px" v-model="formData.shortName"></el-input>
         </el-form-item>
           <el-form-item label="城市" >
          <v-distpicker ref="distpicker" @selected="sel" hide-area level=2></v-distpicker>
         </el-form-item>
         <el-form-item  style="margin-left:240px">
          <el-button @click="formData={}">清除</el-button>
          <el-button type="primary" @click="searchList">搜索</el-button>
        </el-form-item>
      </el-form>
     <el-tabs type="card"  @tab-click="filterClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="已审核" name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
      </el-tabs>
       <el-alert  :title="`数据一共${total}条`" show-icon  type="info" ></el-alert>
    <el-table :data="list" stripe style="width: 100%">
       <el-table-column prop="catalog" label="目录" width="90">
         <template slot-scope=""></template>
       </el-table-column>
       <el-table-column  prop="questionType" :formatter="questionType" label="题型"  width="80">
       </el-table-column>
       <el-table-column label="题干" width="118">
            <template slot-scope="{row}">
              <span v-html="row.question"></span>
            </template>
          </el-table-column>
        <el-table-column prop="addDate" :formatter="datePipe" label="录入时间" width="140">
       </el-table-column>
        <el-table-column prop="difficulty" :formatter="difficult" label="难度" width="80">
       </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
       </el-table-column>
        <el-table-column prop="chkState" :formatter="chkState" label="审核状态" width="100">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="100">
       </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
       </el-table-column>
        <el-table-column prop="publishState" :formatter="publishState" label="发布状态" width="100">
       </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
      <template slot-scope="{row}">
        <el-button @click="handleClick(row)" type="text" size="small">预览</el-button>
        <el-button type="text" size="small" @click="Audit(row)" :disabled="row.chkState===1?true:false">审核</el-button>
        <el-button type="text" size="small" :disabled="row.publishState?true:false">修改</el-button>
        <el-button type="text" size="small" @click="remove(row)">{{row.publishState?'下架':'上架'}}</el-button>
        <el-button type="text" size="small" @click="del(row.id)" :disabled="row.publishState?true:false">删除</el-button>
      </template>
    </el-table-column>
   </el-table>
  <div>
     <el-pagination
     class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
  <!-- 题目预览弹窗 -->
  <el-dialog title="题目预览" :visible="isShow"  @close="isShow=false">
   <el-row :gutter="10">
     <el-col :span="6" >【题型】：
       <span v-if="preview.questionType==='1'">单选题</span>
       <span v-else-if="preview.questionType==='2'">多选题</span>
       <span v-else>简答</span>
     </el-col>
     <el-col :span="6" >【编号】：<span>{{preview.id}}</span></el-col>
     <el-col :span="6" >【难度】：
      <span v-if="preview.difficulty==='1'">简单</span>
       <span v-else-if="preview.difficulty==='2'">一般</span>
       <span v-else>困难</span>
       </el-col>
     <el-col :span="6" >【标签】：<span>{{preview.tags}}</span></el-col>
   </el-row>
    <el-row :gutter="10" style="margin:30px 0px">
     <el-col :span="6" >【学科】：<span>{{preview.subjectName}}</span></el-col>
     <el-col :span="6" >【目录】：<span>{{preview.directoryName}}</span></el-col>
     <el-col :span="6" >【方向】：<span>{{preview.direction}}</span></el-col>
   </el-row>
   <hr>
    <el-row :gutter="10" v-if="preview.questionType!==3">
        <el-col :span="24" >【题干】:
        <span v-html="preview.question"></span>
        </el-col>
   </el-row>
   <el-row :gutter="10" v-if="preview.questionType!=='3'">
        <el-col :span="24" style="margin:20px 0px">单选题 选项:(以下选中的选项为正确答案)</el-col>
        <el-radio-group v-model="radio">
             <el-radio  :label="item.code"  v-for="item in preview.options" :key="item.id">{{item.title}}</el-radio>
        </el-radio-group>
   </el-row>
   <hr>
   <el-row :gutter="10">
        <el-col :span="6" style="margin:20px 0px">【参考答案】：<span>111</span></el-col>
   </el-row>
   <hr>
   <el-row :gutter="10">
        <el-col :span="24" style="margin:20px 0px">【答案解析】:
          <span v-html="preview.answer"></span></el-col>
   </el-row>
   <hr>
   <el-row :gutter="10">
        <el-col :span="24" style="margin:20px 0px">【题目备注】:
           <span>{{preview.remarks}}</span></el-col>
   </el-row>
   <hr>
   <el-button type="primary" class="cancal" @click="isShow=false">关闭</el-button>
  </el-dialog>
  <!-- 审核弹窗 -->
  <el-dialog title="题目审核" :visible="isAuditShow"  @close="isAuditShow=false" class="aduit">
        <el-radio-group v-model="audit" @change="redioChange">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
      </el-radio-group>
      <el-input class="textae" type="textarea"  placeholder="请输入审核意见"  v-model="auditchkRemarks"    show-word-limit></el-input>
      <el-row :gutter="10" type="flex" justify="end">
        <el-col :span="6">
          <el-button @click="isAuditShow=false">取消</el-button>
          <el-button type="primary" @click="btnOK">确认</el-button>
        </el-col>
      </el-row>
  </el-dialog>
</el-card>
</template>

<script>
import VDistpicker from 'v-distpicker'
import {datePipe} from "@/utils"
import{choiceListData,subjectsSimpleList,detailListData,
AuditSuggest,directoryListData,tagsListData,searchList,
putAway,delList} from "@/api/choice"
export default {
   components: {
    VDistpicker
  },
  name:'choice',
  data() {
    return {
      index:null,
       formData:{},
      tagsList:[], //标签
      directorysList:[], //目录
      auditId:null, //
      audit:null, //审核选择绑定
      radioAudit:null, //审核的选择项
      auditchkRemarks:null, //审核内容
      radio:null, //选择题单选
      preview:{},
      isAuditShow:false, //题目审核预览弹窗
      isShow:false,  //题目预览弹窗
      list:[],//初始化菜单
      subjectList:[], //学科目录
      query:{
        page:1,
        pagesize:5,
      },
      total:null,
    }
  },
  created(){
    this.subjectsSimpleList()
    this.initData()
    
  },
  methods:{
    // 分页器
      handleSizeChange(val) {
        this.query.pagesize = val
        this.initData()
        // console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.query.page = val
        this.initData()

        // console.log(`当前页: ${val}`);
      },
      // 科目简单数据列表
    async subjectsSimpleList(){
      const res=await subjectsSimpleList()
      // console.log(res);
      this.subjectList=res.data
    },
    // 页面数据渲染
    async initData(){
      const res =await choiceListData(this.query)
      // console.log(res);
      this.total=res.data.counts
      this.list=res.data.items
    },
    // 试题类型处理
    difficult(row, column){
      if(row.difficulty==="1"){
        return '简单'
      }
      else if(row.difficulty==="2"){
        return '一般'
      }
       else if(row.difficulty==="3"){
        return '困难'
      }
         
    },
    // 审核状态处理
    chkState(row){
      if(row.chkState===0){
        return <el-button type="warning" size="mini" plain>待审核</el-button>
      }
      else if(row.chkState===1){
        return <el-button type="success" size="mini" plain>已通过</el-button>
      }
      else return <el-button type="info" size="mini" plain>拒绝</el-button>
      
    },
    // 提醒处理
    questionType(row){
        if(row.questionType==="1"){
        return '单选'
      }
      else if(row.questionType==="2"){
        return '多选'
      }
      else return '简答'
    },
    // 发布状态
    publishState(row){
       if(row.publishState===1){
        return '已发布'
      }
      else return '未发布'
    },
    // 时间处理
    datePipe(row){
    return datePipe(row.addDate)
    },
    // 预览
   async handleClick(row){
    //  console.log(row.questionType);
      this.isShow=true
     const {data}= await detailListData(row.id)
     this.preview=data

    //  console.log(this.preview);
     if(row.questionType==="3"){
       return ''
     }else{
         let res= this.preview.options.find(item=>item.isRight)
         console.log(res);
        this.radio=res.code
     }

    },
    // 审核
  async  Audit(row){
    console.log(row);
    this.isAuditShow=true
     const {data}= await detailListData(row.id)
      this.preview=data
      this.auditId=row.id
     this.aduit=this.preview.chkState
    //  console.log(this.aduit);
  },
  // 选择项的chkState
    redioChange(val){
    console.log(val);
    this.radioAudit=val
    },
    // 提交审核
    async btnOK(){
      await AuditSuggest({
        id:this.auditId,
        chkState:this.radioAudit,
        chkRemarks:this.auditchkRemarks
      })
      this.isAuditShow=false
      this.initData()  
    },
    // 获取选择框学科id/tags标签
   async change(val){
    //  console.log(val);
    // this.formData.subjectID=val
     const {data} =await directoryListData(val)
     this.directorysList=data
     const res=await tagsListData(val)
     this.tagsList=res.data
    },
    // 搜索
    async searchList(){
     const {data}= await searchList(this.formData)
     console.log(data);
     this.list=data.items
     this.total=this.list.length
    },
    // 下架S
      async remove(row){
     await this.$confirm(row.publishState?'确认上架？':'确认下架？').then(async()=>{
      await putAway({
             id:row.id,
             publishState:row.publishState?0:1
      })
     await this.$message.success(row.publishState?'上架成功':'下架成功')
     }).catch(()=>{
       this.$message(row.publishState?'取消上架':'取消下架')
      })
    
      // this.$message(row.publishState?'上架成功':'下架成功')
      await this.initData()
    },
    // 删除
   async del(id){
    await this.$confirm('此操作将永久删除该题目，是否继续').then(async()=>{
      await delList(id)
     await this.$message.success('删除成功')
     this.initData()
    }).catch(()=>{
      this.$message('取消删除')
    })
    
    },
    //筛选全部、审核等
   async filterClick(tab, event) {
        // console.log(tab, event);
        this.index=tab.index
        console.log(this.index);
        let res
        if(tab.index==0){
      res= await  choiceListData(this.query)
        }
        else{
          // console.log(1);
         res= await choiceListData({...this.query,
            chkState:this.index-1
          })
        }
        this.list=res.data.items
        this.total=this.list.length

      },
      // 渲染城市列表
      sel: function(data) {
          // this.citydata = data.province.value + data.city.value
          // console.log(this.citydata);
          this.qsForm.province=data.province.value
          this.qsForm.city=data.city.value
          console.log(this.qsForm);
        },

    }
    
  

}
</script>

<style lang="scss" scoped>
.box-card{
  margin: 10px;
}
.clearfix{
display: flex;
justify-content: end;
}
.pagination{
  margin-top: 20px;
  float: right;
}
::v-deep .el-dialog__header{
  background: rgba(64, 158, 255);
  .el-dialog__title{
    color: #fff;
  }
  .el-icon-close:before{
    color: #fff;
  }
}
.cancal{
  margin-left: 686px;
}
.textae{
  margin-top: 20px;
  margin-bottom: 20px;
  // height: 150px;
}
</style>
